<template>
	<view>
		<u-notice-bar mode="horizontal" :volumeIcon="false" :list="list"></u-notice-bar>
		<!-- 余额部分 -->
		<view class="fl-s-s p-r-30" style="margin-top: 36rpx;">
			<text class="fs-26 fm-ali" style="color: #999999;">余额</text>
			<view class="fr-b-c w-1 m-t-10">
				<view class="fr-s-c fm-ali" style="color: #000000; align-items: baseline;">
					<text class="fs-36">￥</text>
					<text style="font-size: 66rpx;">{{user_info.money.data || user_info.money}}</text>
				</view>
				<!-- <navigator url="/pages/UserCenter/RecommendationCenter/Withdrawal/Recharge/Recharge" class="fr-c cz-btn">充值</navigator> -->
			</view>
		</view>
		<!-- 提现部分 -->
		<view class="tx-box fl-s-s">
			<text class="fs-32 fm-ali" style="color: #000000;">提现至</text>
			<scroll-view scroll-x style="margin-top: 36rpx; white-space: nowrap;">
				<view @click="curType = index" :class="[index==curType?'item-act':'type-item','fr-c','relative']" v-for="(item,index) in types" :key="index">
					<image v-if="index==curType" src="/static/images/user/choosed_icon.png" style="width: 42rpx; height: 42rpx; position: absolute; left: 0; top: 0;" ></image>
					<image :src="item.img" style="width: 48rpx; height: 48rpx;"></image>
					<text class="fs-28 m-l-10">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 支付宝 -->
		<view class="ali-box w-1 fl-s-s p-r-30"  v-if="curType==0">
			<text class="ali-title">真实姓名</text>
			<input class="my-input w-1" v-model="real_name" type="text" placeholder="点击输入">
			<text class="ali-title">支付宝账号</text>
			<input class="my-input w-1" v-model="zfb_account" type="text" placeholder="点击输入">
			<text class="ali-title">提现金额</text>
			<input class="my-input w-1" v-model="money" type="digit" placeholder="点击输入">
		</view>
		<!-- 微信 -->
		<view class="ali-box w-1 fl-s-s p-r-30" v-if="curType==1">
			<text class="ali-title">提现金额</text>
			<input class="my-input w-1" v-model="money" type="digit" placeholder="点击输入">
			<text class="ali-title">微信收款码</text>
			<view class="fr-s-c m-t-30 ">
				<image @click="previewImage" v-if="wx_img" :src="wx_img" mode="aspectFill" class="m-r-20" style="width: 220rpx; height: 220rpx; border-radius: 8rpx;"></image>
				<view class="u-rela fl-c" @click="chooseImage" style="width: 220rpx; height: 220rpx; ">
					<image src="/static/images/user/uploads-img.png" mode="aspectFill" class="u-abso" style="width: 220rpx; height: 220rpx; border-radius: 8rpx;"></image>
					<text class="u-rela" style="margin-top: 70rpx; font-size: 24rpx; color: #999999;">上传图片</text>
				</view>
			</view>
		</view>
		<!-- 银行卡 -->
		<view class="ali-box w-1 fl-s-s p-r-30"  v-if="curType==2">
			<text class="ali-title">真实姓名</text>
			<input class="my-input w-1" v-model="real_name" type="text" placeholder="点击输入">
			<text class="ali-title">手机号</text>
			<input class="my-input w-1" type="text" v-model="phone" placeholder="点击输入">
			<text class="ali-title">银行卡号</text>
			<input class="my-input w-1" type="number" v-model="bank_account" placeholder="点击输入">
			<text class="ali-title">提现金额</text>
			<input class="my-input w-1" v-model="money" type="digit" placeholder="点击输入">
		</view>
		<!-- 提交按钮 -->
		<view class="iphonex fr-c" style="background: #FFFFFF;">
			<view class="fr-c sub-btn" @click="subInfo">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: ['uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'],
				types:[
					{
						name:'支付宝',
						img:'/static/images/user/ali_icon.png'
					},{
						name:'微信',
						img:'/static/images/user/we_icon.png'
					},{
						name:'银行卡',
						img:'/static/images/user/card_icon.png'
					},
				],
				curType:0,
				real_name:'',  // 真实姓名
				zfb_account:'', // 支付宝账号
				wx_img:'',			// 微信首款吗
				bank_account:'',	// 银行卡号
				bank_name:'',			// 银行开户行
				money:'',// 提现数
				nowMoney:0,
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				phone:'',
				user_info:'',
			}
		},
		onLoad() {
			let user_info= uni.getStorageSync('wanlshop:user')
			this.user_info = user_info
			
		},
		methods: {
			async chooseImage(){
				//#ifdef APP-PLUS				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')					console.log(result)				if (result !== 1) return
				this.$store.state.isCAMERA = true				// #endif
				
				uni.chooseImage({
					count: 1,
					success: res => {
						const tempFilePaths = res.tempFilePaths
						this.wx_img = res.tempFilePaths[0]
						// const imgres = await this.$up({
						// 	imageUrl:res.tempFilePaths
						// })
						// this.$post({
						// 	url:'/Appuser/updateUser',
						// 	data:{
						// 		access_token:uni.getStorageSync('access_token'),
						// 		avatar:imgres[0]
						// 	}
						// }).then(res=>{
						// 	uni.hideLoading()
						// 	uni.showToast({
						// 		title:'修改成功',
						// 		mask:true
						// 	})
						// 	this.avatar = imgres[0]
						// 	uni.setStorageSync('avatar',imgres[0])
						// })
					}
				})
			},
			// 预览图片
			previewImage(){
				uni.previewImage({
					current:this.wx_img,
					urls:[this.wx_img]
				})
			},
			async subInfo(){
				uni.navigateTo({
					url:'/pages/UserCenter/RecommendationCenter/Withdrawal/WithDrawalSuccess/WithDrawalSuccess'
				})
				// let data = {}
				// switch(this.curType/1){
				// 	case 0:
				// 	// 支付宝
				// 	if(!this.real_name) return this.$u.toast('请输入真实姓名');
				// 	if(!this.zfb_account) return this.$u.toast('请输入支付宝账号');
				// 	if(!this.money) return this.$u.toast('请输入提现金额');
				// 	data = {
				// 		type:1,
				// 		access_token:uni.getStorageSync('access_token'),
				// 		real_name:this.real_name,
				// 		zfb_account:this.zfb_account,
				// 		money:this.money
				// 	}
				// 	break;
				// 	case 1:
				// 	// 微信
				// 	if(!this.wx_img) return this.$u.toast('请选择微信收款码');
				// 	if(!this.money) return this.$u.toast('请输入提现金额');
				// 	const imgres = await this.$up({
				// 		imageUrl:[this.wx_img]
				// 	})
				// 	this.wx_img = imgres[0]
				// 	data = {
				// 		type:3,
				// 		access_token:uni.getStorageSync('access_token'),
				// 		money:this.money,
				// 		wx_img:this.wx_img
				// 	}
				// 	break;
				// 	case 2:
				// 	// 银行卡
				// 	if(!this.real_name) return this.$u.toast('请输入真实姓名');
				// 	if(!this.bank_account) return this.$u.toast('请输入银行卡号');
				// 	if(!this.bank_name) return this.$u.toast('请输入开户行');
				// 	if(!this.money) return this.$u.toast('请输入提现金额');
				// 	data = {
				// 		type:2,
				// 		access_token:uni.getStorageSync('access_token'),
				// 		real_name:this.real_name,
				// 		bank_account:this.bank_account,
				// 		bank_name:this.bank_name,
				// 		money:this.money
				// 	}
				// 	break;
				// }
				// this.$get({
				// 	url:'/zhihuan/tixian_add',
				// 	data
				// }).then(res=>{
				// 	uni.navigateTo({
				// 		url:'/pages/UserCenter/RecommendationCenter/Withdrawal/WithDrawalSuccess/WithDrawalSuccess'
				// 	})
				// })
				
			}
		}
	}
</script>

<style>
	>>>.u-icon__icon span{
		/* width: 0!important; */
		display: none!important;
	}
	>>>.u-notice-bar{
		padding: 0!important;
	}
	page{
		padding-bottom: 180rpx;
	}
	.tip-box {
		width: 750rpx;
		height: 60rpx;
		background: #fff6ec;
		padding-left: 32rpx;

	}

	.cz-btn {
		width: 148rpx;
		height: 56rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #CCCCCC;
		font-size: 26rpx;
		font-family: Alibaba;
		color: #999999;
	}
	.tx-box{
		padding-left: 32rpx;
		margin-top: 62rpx;
	}
	.type-item{
		width: 256rpx;
		height: 104rpx;
		display: inline-flex;
		margin-right: 26rpx;
		background: #F4F4F4;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: Alibaba;
		color: #666666;
	}
	

	.item-act{
		width: 256rpx;
		height: 104rpx;
		display: inline-flex;
		background: rgba(250, 54, 10, 0.08);
		border-radius: 8rpx;
		border: 2rpx solid #FA360A;
		border-radius: 8rpx;
		font-family: Alibaba;
		color: #333333;
		margin-right: 26rpx;
		font-size: 28rpx;
	}
	
	.ali-title{
		font-size: 32rpx;
		font-family: Alibaba;
		color: #000000;
		margin-top: 80rpx;
	}
	.my-input{
		height: 104rpx;
		background: #F4F4F4;
		border-radius: 8rpx;
		padding: 0 32rpx;
		margin-top: 36rpx;
	}
	.sub-btn{
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #E46C30 0%, #E32C1C 100%);
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}
	/deep/.u-icon-wrap{
		margin-left: 20rpx;
	}
</style>
